<template>
  <div class="app-container">
<!--    {{id}}-->
    <el-form ref="form" :model="role" label-width="80px">
      <el-form-item label="角色姓名">
        <el-input v-model="role.name"  style="width: 217px;"></el-input>
      </el-form-item>

      <el-form-item label="权限">
        <el-checkbox-group v-model="module" style="width: 110px;">
          <el-checkbox v-for="item in modules" :label="item.id">
            {{item.roleName}}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
<!--     图片-->
<!--      <el-form-item label="头像">-->
<!--        <el-image-->
<!--            style="width: 100px; height: 100px"-->
<!--            :src="'/api'+role.path"-->
<!--            :fit="fit"></el-image>-->
<!--      </el-form-item>-->




      <el-form-item>
<!--        给修改前加上一个判断条件 是否需要修改-->
        <el-button type="primary" @click="onSubmit">修改</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<style>
  /*#app{*/
  /*  text-align: left;*/
  /*}*/
  .el-form{
    float: left;
  }
</style>

<script>
import axios from "axios";

export default {
  name: "roleEditView",
  data(){       //data:{}
    return {
      role:{
        id:'',
        name:"",
      },

      module:[],  //用户当前的角色
      modules:[
        // {
        //   id:1,
        //   roleName:"用户删除"
        // },
        // {
        //   id:2,
        //   roleName:"小说下架"
        // },
        // {
        //   id:3,
        //   roleName:"小说上架"
        // },
        // {
        //   id:14,
        //   roleName:"小说下架"
        // },

      ], //所有的角色

    }
  },
  //获取数据
  created(){
    //通过this.$route.query.id获取当前路由参数中的id值
    this.role.id=parseInt(this.$route.query.id)

    axios({
      url: '/api/role/queryById/'+this.role.id,
      method: 'post',
      data: this.role,
      headers:{"Authorization":"Bearer "+this.$store.state.user.token}
    }).then(res => {
      console.log(res.data.data)
      this.role.name=res.data.data.name
      //获取第一章图片的回显(同下)
      // if(res.data.data.path){
      //   this.fileList=[
      //     {
      //       name: '',
      //       url: '/api'+res.data.data.path,
      //     }
      //   ]
      // }
      // //获取第一章图片的回显
      // this.fileList[0].name="files"
      // this.fileList[0].url="/api"+res.data.data.path
      var arr=res.data.data.moduleList
      // console.log(arr)
      for (const key in arr) {
        this.module.push(arr[key].id)
      }
    })

    axios({
      url: '/api/module/queryModuleAll',
      method: 'post',
      headers:{"Authorization":"Bearer "+this.$store.state.user.token}
    }).then(res => {
      // console.log(res.data.data)
      this.modules=res.data.data
    })


  },

  methods:{
    //修改数据
    onSubmit(){
      //创建表单对象
      // var formData = new FormData();
      //创建表格对象
      var formData = new window.FormData()
      for (const key in this.role){
        formData.append(key,this.role[key])
      }
      console.log(formData)
      // 将fileList中的文件添加到formData中 循环添加文件对象中的raw 后台接收的二进制
      // for (const key in this.fileList) {
      //   formData.append("files",this.fileList[key].raw)
      // }
      for (const key in this.module) {
        formData.append("ids",this.module[key])
      }
      this.$confirm('是否确定修改?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        axios({
          url:"/api/role/edit",
          method:"post",
          data:formData,
          //添加请求头
          // headers:{"Content-Type":"multipart/form-data"}
          headers:{"Authorization":"Bearer "+this.$store.state.user.token}
        }).then(res=>{
          if(res.data.code==1){
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            //返回医生信息表
            this.$router.push("/role")
          }else {
            this.$message({
              message: res.data.message,
              type: 'error'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });
    },
    //删除文件
    removeImg(file){
      //根据uid删除对应的文件
      for (const key in this.fileList) {
        if (this.fileList[key].uid === file.uid) {
          this.fileList.splice(key, 1)
        }
      }
    },
    cancel(){
      this.$router.push("/role/roleView")
    },


  }

}
</script>

<style scoped>

</style>
